<template>
  <div style="background: whitesmoke;height: 100%;width: 100%">
    <el-row style="width:90%;margin-left: 8%;margin-top: 5%;color: whitesmoke">
      <el-card >
        <el-col  style="margin-right: 10%;height: 50px;width: 10%;color:gray;size: 20px" >
          订单信息
        </el-col>
        <el-col style="margin-right: 10%;height: 50px;width: 10%;color:gray">
          单价(元)
        </el-col>
        <el-col style="margin-right: 10%;height: 50px;width: 10%;color:gray">
          实付金额(元)
        </el-col>
        <el-col style="margin-right: 10%;height: 50px;width: 10%;color:gray">
          交易状态
        </el-col>
        <el-col style="margin-right: 10%;height: 50px;width: 10%;color:gray">
          交易操作
        </el-col><br>
        <el-divider></el-divider>

        <el-col  v-for="order in orders" :label="order" :key="order.id" >
          <el-divider content-position="left" style="color: #c0ccda">订单id：{{order.orderid}}</el-divider>
          <el-col v-for="orderDetail in order.orderDetail" :label="orderDetail" :key="orderDetail.id" style="width: 60%">
            <el-col style="margin-right: 10%;width: 25%;">
              <el-row><span style="font-size: 10px;color: #c0ccda">  子订单号:{{orderDetail.orderDetailId}}</span></el-row>
              <el-row> {{orderDetail.course.courseName}}</el-row>
            </el-col>

            <el-col style="margin-right: 18%;height: 50px;width: 18%;color:gray;size: 20px">
              <el-row>
                {{orderDetail.course.pay}}
              </el-row>
            </el-col>
            <el-col style="margin-right: 18%;height: 50px;width: 8%;color:gray;size: 20px">
              <el-row>
                {{orderDetail.course.pay}}
              </el-row>
            </el-col>
            <br>
            <el-divider direction="vertical"></el-divider>
          </el-col>

          <el-col style="height: 50px;width: 25%;color:gray;size: 20px">

            <el-col style="margin-right: 45%;height: 50px;width: 35%;color:gray;size: 20px">
              <el-row v-if="order.orderStatus==1">
                已支付
              </el-row>
              <el-row v-if="order.orderStatus==0">
                待付款
              </el-row>
            </el-col>
            <el-col style="margin-right: -29%;height: 50px;width: 40%;color:gray;size: 20px">
              <el-row v-if="order.orderStatus==0">
                <el-button type="warning" round>立即支付</el-button>
              </el-row>
              <el-row v-if="order.orderStatus==1">
                <el-button type="success" round>重新购买</el-button>
              </el-row>
            </el-col>
          </el-col>
        </el-col>
      </el-card>
    </el-row>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    name: "",
    data(){
      return{
        orders:[]
      }
    },
    methods:{
      findOrder:function () {
        axios.post("userapi/qflive-order/order/findOldOrdersByUserid").then(res=>{
          if (res.data.success){
            this.orders=res.data.queryResult.list
          }
        })
      }
    },
    mounted(){
      this.findOrder();
    }

  }
</script>

<style scoped>

</style>
